<template>
    <div>
      <div>
        <h2>排片计划列表</h2>
        <table>
          <thead>
            <tr>
              <th>电影</th>
              <th>放映厅</th>
              <th>日期</th>
              <th>时间</th>
              <th>票价</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="schedule in schedules" :key="schedule.id">
              <td>{{ schedule.movie.title }}</td>
              <td>{{ schedule.hall }}</td>
              <td>{{ formatDate(schedule.date) }}</td>
              <td>{{ formatTime(schedule.date) }}</td>
              <td>{{ schedule.price }}</td>
              <td>
                <button @click="editSchedule(schedule)">编辑</button>
                <button @click="deleteSchedule(schedule)">删除</button>
                <button @click="viewDetails(schedule)">详情</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div>
        <h2>添加新排片</h2>
        <form @submit.prevent="addNewSchedule">
          <select v-model="selectedMovie">
            <option v-for="movie in availableMovies" :value="movie">{{ movie.title }}</option>
          </select>
          <select v-model="selectedHall">
            <option value="Hall 1">Hall 1（可容纳 200 人）</option>
            <option value="Hall 2">Hall 2（可容纳 150 人）</option>
            <option value="Hall 3">Hall 3（可容纳 100 人）</option>
          </select>
          <input type="datetime-local" v-model="newDate">
          <input v-model="newPrice" placeholder="票价">
          <button type="submit">添加排片</button>
        </form>
      </div>
      <div v-if="editingSchedule" class="edit-modal">
        <h2>编辑排片信息</h2>
        <form @submit.prevent="saveEditedSchedule">
          <select v-model="editingSchedule.movie">
            <option v-for="movie in availableMovies" :value="movie">{{ movie.title }}</option>
          </select>
          <select v-model="editingSchedule.hall">
            <option value="Hall 1">Hall 1（可容纳 200 人）</option>
            <option value="Hall 2">Hall 2（可容纳 150 人）</option>
            <option value="Hall 3">Hall 3（可容纳 100 人）</option>
          </select>
          <input type="datetime-local" v-model="editingSchedule.date">
          <input v-model="editingSchedule.price" placeholder="票价">
          <button type="submit">保存</button>
          <button @click="cancelEdit">取消</button>
        </form>
      </div>
      <div v-if="showingDetails" class="details-modal">
        <h2>排片详情</h2>
        <p>电影：{{ showingDetails.movie.title }}</p>
        <p>放映厅：{{ showingDetails.hall }}（可容纳 {{ getHallCapacity(showingDetails.hall) }} 人）</p>
        <p>日期：{{ formatDate(showingDetails.date) }}</p>
        <p>时间：{{ formatTime(showingDetails.date) }}</p>
        <p>票价：{{ showingDetails.price }}</p>
        <button @click="closeDetails">关闭</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        schedules: [
          {
            id: 1,
            movie: { id: 1, title: '毒液:最后一舞' },
            hall: '1号',
            date: '2024-11-01T15:00',
            price: 35,
          },
          {
            id: 2,
            movie: { id: 2, title: '爱你很久很久' },
            hall: '2号',
            date: '2024-11-02T18:30',
            price: 30,
          },
          {
            id: 3,
            movie: { id: 2, title: '志愿军：存亡之战' },
            hall: '3号',
            date: '2024-11-02T19:30',
            price: 30,
          }
        ],
        availableMovies: [
          { id: 1, title: 'Avengers: Endgame' },
          { id: 2, title: 'Inception' },
          { id: 3, title: 'The Dark Knight' },
        ],
        selectedMovie: null,
        selectedHall: '',
        newDate: '',
        newPrice: '',
        editingSchedule: null,
        showingDetails: null,
      };
    },
    methods: {
      addNewSchedule() {
        if (!this.selectedMovie ||!this.selectedHall ||!this.newDate ||!this.newPrice) {
          alert('请填写完整信息');
          return;
        }
        const newSchedule = {
          id: Date.now(),
          movie: this.selectedMovie,
          hall: this.selectedHall,
          date: this.newDate,
          price: this.newPrice,
        };
        this.schedules.push(newSchedule);
        this.selectedMovie = null;
        this.selectedHall = '';
        this.newDate = '';
        this.newPrice = '';
      },
      editSchedule(schedule) {
        this.editingSchedule = {...schedule };
      },
      saveEditedSchedule() {
        if (!this.editingSchedule.movie ||!this.editingSchedule.hall ||!this.editingSchedule.date ||!this.editingSchedule.price) {
          alert('请填写完整信息');
          return;
        }
        const index = this.schedules.findIndex(s => s.id === this.editingSchedule.id);
        if (index!== -1) {
          this.schedules[index] = this.editingSchedule;
        }
        this.editingSchedule = null;
      },
      cancelEdit() {
        this.editingSchedule = null;
      },
      deleteSchedule(schedule) {
        const confirmDelete = confirm('确定要删除该排片吗？');
        if (confirmDelete) {
          const index = this.schedules.findIndex(s => s.id === schedule.id);
          if (index!== -1) {
            this.schedules.splice(index, 1);
          }
        }
      },
      viewDetails(schedule) {
        this.showingDetails = schedule;
      },
      closeDetails() {
        this.showingDetails = null;
      },
      formatDate(dateTime) {
        return new Date(dateTime).toISOString().split('T')[0];
      },
      formatTime(dateTime) {
        return new Date(dateTime).toTimeString().split(' ')[0];
      },
      getHallCapacity(hall) {
        if (hall === 'Hall 1') return 200;
        if (hall === 'Hall 2') return 150;
        if (hall === 'Hall 3') return 100;
        return 0;
      },
    },
  };
  </script>
  
  <style scoped>  
  body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0;  
    background-color: #f4f4f4;  
  }  
  
  .container {  
    max-width: 1200px;  
    margin: 0 auto;  
    padding: 20px;  
    background-color: #fff;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
    border-radius: 8px;  
  }  
  
  h1, h2 {  
    color: #333;  
    text-align: center;  
    margin-bottom: 20px;  
  }  
  
  table {  
    width: 100%;  
    border-collapse: collapse;  
    margin-bottom: 20px;  
  }  
  
  table th, table td {  
    border: 1px solid #ddd;  
    padding: 10px;  
    text-align: left;  
  }  
  
  table th {  
    background-color: #f2f2f2;  
  }  
  
  table tr:nth-child(even) {  
    background-color: #f9f9f9;  
  }  
  
  button {  
    padding: 10px 20px;  
    margin: 5px;  
    border: none;  
    border-radius: 5px;  
    cursor: pointer;  
    transition: background-color 0.3s;  
  }  
  
  button:hover {  
    background-color: #ddd;  
  }  
  
  .edit-modal, .details-modal {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    background-color: #fff;  
    padding: 30px;  
    border: 1px solid #ccc;  
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);  
    z-index: 1000;  
    border-radius: 10px;  
    width: 400px;  
  }  
  
  .modal-header {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    margin-bottom: 20px;  
  }  
  
  .modal-header h2 {  
    margin: 0;  
  }  
  
  .modal-header button {  
    background-color: transparent;  
    border: none;  
    font-size: 18px;  
    cursor: pointer;  
  }  
  
  .modal-header button:hover {  
    color: #f00;  
  }  
  
  .modal-form {  
    display: flex;  
    flex-direction: column;  
  }  
  
  .modal-form select, .modal-form input {  
    margin-bottom: 15px;  
    padding: 10px;  
    border: 1px solid #ccc;  
    border-radius: 5px;  
    font-size: 16px;  
  }  
  
  .modal-form button {  
    margin-top: 20px;  
    padding: 10px 20px;  
    background-color: #28a745;  
    color: #fff;  
    border-radius: 5px;  
    cursor: pointer;  
    transition: background-color 0.3s;  
  }  
  
  .modal-form button:hover {  
    background-color: #218838;  
  }  
  
  .modal-form button.cancel {  
    background-color: #dc3545;  
  }  
  
  .modal-form button.cancel:hover {  
    background-color: #c82333;  
  }  
  
  .form-group {  
    margin-bottom: 15px;  
  }  
  
  .form-group label {  
    display: block;  
    margin-bottom: 5px;  
  }  
  
  .form-group input {  
    width: 100%;  
    padding: 8px;  
    box-sizing: border-box;  
  }  
</style>